<template>
    <div class="home-wrap" v-loading="loading">

        <div>
            <el-card class="box-card home-item" shadow="hover" style="width: 700px;min-height: 171px">
                <div slot="header" class="clearfix">
                    <span>默认收货地址</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="goto('/home/address', $event.target)">管理地址</el-button>
                </div>
                <div class="text">
                    <el-descriptions title="" v-if="homeInfo.address !== ''">
                        <el-descriptions-item label="姓名">丁亮</el-descriptions-item>
                        <el-descriptions-item label="手机号">15907286563</el-descriptions-item>
                        <el-descriptions-item label="地址类型">
                            <el-tag size="small">思创</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="备注">
                            <el-tag size="small">学校</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="联系地址">湖北省襄阳市襄城区湖北文理学院</el-descriptions-item>
                    </el-descriptions>
                    <div v-else>
                        <el-link :underline="false">还没有添加地址，快来添加一个地址吧~</el-link>
                    </div>
                </div>

            </el-card>

            <el-card class="todolist box-card "  style="width: 700px" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>待办事项</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <div class="text">
                </div>
            </el-card>
        </div>


        <div>

            <el-card class="box-card home-item" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>格言</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <div class="text item">
                </div>
            </el-card>

            <el-card class="box-card" shadow="hover" style="height: 460px">
                <div slot="header" class="clearfix">
                    <span>动画演示</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <div class="text item">
                </div>
            </el-card>
        </div>

    </div>

</template>

<script>

    export default {
        name: "Home",
        components:{},
        data(){
            return{
                loading: true,
                homeInfo: {
                    address: '',
                }
            }
        },
        methods: {
            init(){
                setTimeout(()=>{
                    this.loading = false
                    console.log("结束了")
                },500)
            },
            goto(page,event){
                this.$router.push(page);
                if(event.nodeName === 'SPAN' || event.nodeName === 'I'){
                    event = event.parentNode;
                }
                event.blur();
            },
        },
        mounted(){
            this.init();
        },
        activated(){
            console.log('home组件激活')
        },
        deactivated(){
            console.log('home组件失活')
        },
    }
</script>

<style scoped>
    .home-wrap{
        width: 70vw;
        margin: 0 auto 20px auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .home-item{
        margin-bottom: 20px;
    }
    .todolist{
        width: fit-content;
        height: 500px;
    }
    .todolist .el-card__body{

    }

    .box-card{
        height: fit-content;
    }

    .text {
        font-size: 14px;
    }
    /*卡片头部字体*/
    .el-card__header span{
        padding: 18px 20px;
        font-weight: 600;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
</style>